<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <title>医学文献检索系统</title>
    <style>
        .st1 {
            height: 60px;
            width: 90%;

            margin-left: 30%;
            margin-top: 20px;

        }

        .st2 {
            height: 32px;
            width: 60px;
            background-color: #2ac;
            border-radius: 4px;
            margin-left: 10px;
            margin-top: 20px;
            float: left;
            color: #fff;
            text-align: center;
            line-height: 32px;
            font-size: 13px;
        }

        .chosed {
            background-color: #a00;
        }

        body {
            font-family: 'Arial', sans-serif;
        }

        .search-container {
            max-width: 1000px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        td {
            padding: 8px;
            text-align: center;
            border-bottom: 1px solid #ddd;
            width: auto;
        }

        th {
            background-color: #f2f2f2;
            padding: 8px;
            text-align: center;
            border-bottom: 1px solid #ddd;
            width: auto;
        }

        /* 样式可以根据需求进行修改 */
        nav {
            background-color: #f2f2f2;
            padding: 10px 0;
            text-align: center;
        }

        nav a {
            padding: 14px 20px;
            text-decoration: none;
            color: black;
            display: inline-block;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        nav a:hover {
            background-color: #ddd;
        }

        .search-bar {
            text-align: center;
            margin-top: 20px;
        }

        input[type="text"] {
            padding: 10px;
            width: 600px;
        }

        input[type="submit"] {
            padding: 10px 20px;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropbtn {
            padding: 14px 20px;
            text-decoration: none;
            color: black;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }
    </style>
    <script>

        function getCookie(cookieName) {
            const strCookie = document.cookie
            const cookieList = strCookie.split(';')

            for (let i = 0; i < cookieList.length; i++) {
                const arr = cookieList[i].split('=')
                if (cookieName === arr[0].trim()) {
                    return arr[1]
                }
            }

            return ''
        }

        function highlight(keywords, text) {
            const index = text.indexOf(keywords);
            res = text.substring(0, index) + "<spen style='color: red'>" + keywords + "</spen>" + text.substring(index + keywords.length);
            return res;
        }

        document.addEventListener('DOMContentLoaded', function () {
            // 群组点击事件
            document.getElementById('groupLink').addEventListener('click', function (event) {
                if (!checkUserLoggedIn()) {
                    alert('您尚未登录，请先登录');
                    window.location.href = '/page/toLoginPage'; // 模拟跳转到登录页面
                    event.preventDefault();
                }
            });

            // 个人资料点击事件
            document.getElementById('profileLink').addEventListener('click', function (event) {
                if (!checkUserLoggedIn()) {
                    alert('您尚未登录，请先登录');
                    window.location.href = '/page/toLoginPage'; // 模拟跳转到登录页面
                    event.preventDefault();
                }
            });


            // 群组聊天点击事件
            document.getElementById('chatLink').addEventListener('click', function (event) {
                if (!checkUserLoggedIn()) {
                    alert('您尚未登录，请先登录');
                    window.location.href = '/page/toLoginPage'; // 模拟跳转到登录页面
                    event.preventDefault();
                }
            });

            // 校验用户是否已登录的函数
            function checkUserLoggedIn() {
                // 这里可以编写校验cookie中用户是否登录的逻辑，返回 true 或 false
                // 假设这里使用一个名为 isUserLoggedIn 的函数来校验
                return isUserLoggedIn();
            }

            // 这里是模拟的校验用户是否已登录的函数
            function isUserLoggedIn() {
                // 假设在 cookie 中有一个名为 'loggedIn' 的标识，表示用户是否已登录
                const username = getCookie('username')
                // alert(username)
                // 返回 true 表示已登录，返回 false 表示未登录
                return username !== '';

            }
        });

        function reload() {
            window.location.href = "/";
        }
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<nav>
    <a href="/user/adminhome">首页</a>
    <div class="dropdown">
        <a class="dropbtn">用户管理</a>
        <div class="dropdown-content">
            <a href="/user/searchUser" id="groupLink">用户管理</a>
            <a href="/user/setting" id="chatLink">新增用户</a>
        </div>
    </div>
    <div class="dropdown">
        <a class="dropbtn">个人中心</a>
        <div class="dropdown-content">
            <a href="/page/toAdminCenterPage" id="profileLink">个人资料</a>
            <a href="/page/Exit">登出</a>
        </div>
    </div>
    <a href="/page/toDataPage">数据报表</a>
</nav>


<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<div id="main" style="width: 1200px;height:400px; margin: 25vh auto auto;"></div>
<div id="main1" style="width: 1200px;height:400px; margin: 25vh auto auto;"></div>
<div id="main2" style="width: 1200px;height:400px; margin: 25vh auto auto;"></div>
<script type="text/javascript">
    var list='${Posts}';
    var arrayStr = JSON.parse(list);
    console.log(arrayStr)
    var titles=[]
    var dowloads=[]
    var likes=[]
    var dislikes=[]
    for (var i=0;i<arrayStr.length;i++){
        titles.push(arrayStr[i].title);
        dowloads.push(arrayStr[i].downloadnum);
        likes.push(arrayStr[i].thumbnum);
        dislikes.push(arrayStr[i].dislikenum);
    }
    console.log(titles)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '本站文件下载量'
        },
        tooltip: {},
        legend: {
            data: ['文件下载量']
        },
        xAxis: {
            data: titles
        },
        yAxis: {},
        series: [
            {
                name: '文件下载量',
                type: 'bar',
                data: dowloads
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));
    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: '本站文件点赞量'
        },
        tooltip: {},
        legend: {
            data: ['文件点赞量']
        },
        xAxis: {
            data: titles
        },
        yAxis: {},
        series: [
            {
                name: '文件点赞量',
                type: 'bar',
                data: likes
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);

    var myChart2 = echarts.init(document.getElementById('main2'));
    // 指定图表的配置项和数据
    var option2 = {
        title: {
            text: '本站文件点踩量'
        },
        tooltip: {},
        legend: {
            data: ['文件点踩量']
        },
        xAxis: {
            data: titles
        },
        yAxis: {},
        series: [
            {
                name: '文件点踩量',
                type: 'bar',
                data: dislikes
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);
</script>
</body>
</html>

